import React, { ReactElement, useEffect } from 'react'
import { PaginationType, ProductList } from '@/models/types'
import { Card, ListView, WingBlank, Icon } from 'antd-mobile'
import { Link } from 'umi';
import Tags from '@/components/Tags'
import styles from './index.less'
import classnames from 'classnames';
interface ListProps {
    pagination: PaginationType,
    data: ProductList[],
    queryList: Function

}

export default function List({ pagination, data, queryList }: ListProps): ReactElement {
    const dataSource = new ListView.DataSource({
        rowHasChanged: (r1: any, r2: any) => r1 !== r2
    })
    /**
     * pageNo < totalPage-1 
     * pageNo++ , 更改data里面的数据，额外添加后面的5个数据
     */
    const onEndReached = () => {
        if (pagination.pageNo !== undefined && pagination.totalPage !== undefined) {
            if (pagination.pageNo < pagination.totalPage - 1) {
                queryList({
                    pageNo: pagination.pageNo + 1,
                    searchKey: pagination.searchKey
                });
            }
        }
    };
    useEffect(() => {
        queryList()
    }, [])
    /**
     * dataSource需要new ListView.DataSouce({
     *  rowHasChanged
     *  r1 !== r2 与 r1 === r2有什么区别
     * })
     * renderRow 渲染row
     * pageSize 每页渲染数
     * 不使用useBodyScroll = {true} 数据不显示
     */
    return (
        <Card full className={styles.main}>
            {data.length ?
                <ListView
                    dataSource={dataSource.cloneWithRows(data)}
                    renderRow={item => Node(item)}
                    pageSize={pagination.pageSize}
                    initialListSize={pagination.pageSize}
                    onEndReached={onEndReached}
                    useBodyScroll={true}
                    renderFooter={() => (
                        <div className="txtCenter">
                            {
                                pagination.pageNo < pagination.totalPage - 1 ? (
                                    <Icon type="loading" />
                                ) : (
                                    <div>加载完毕</div>
                                )
                            }
                        </div>
                    )}
                    onEndReachedThreshold={10}
                ></ListView> : <span className='txtCenter font14'>暂无数据</span>}
        </Card>
    )
}
/**
 * classname 组合自定义class和内置class, 
 * WingBlank 两边留白
 * 
 */
function Node({ img, title, price, tags, id }: ProductList) {
    return (
        <Link className={styles.node} to={'/product/' + id}>
            <div className={classnames(styles.imgBox, 'xyCenter')}>
                <img src={img}></img>
            </div>
            <WingBlank size='lg'>
                <div className='twoRows'>{title}</div>
                <div className={classnames(styles.priceBox, 'font16')}>
                    <span className={styles.yuan}>￥</span>
                    <span className={styles.price}>{price}</span>
                </div>
                <Tags tags={tags}></Tags>
            </WingBlank>
        </Link>
    )
}